<template>
  <div class="panel-table">
    <div class="panel-table-header">
      <div class="name" style="width: 100px">
        超时时间
        <Tooltip transfer theme="light" placement="top">
          <Icon type="ios-alert-outline" size="18" />
          <template #content>
            <p>超时区间</p>
            <p>0.1s - 60s</p>
          </template>
        </Tooltip>
      </div>
      <div class="name" style="width: 100px">重试次数</div>
      <div class="name" style="width: 180px">异常处理方式</div>
    </div>
    <div class="panel-table-list">
      <div class="flex items-center mt-2">
        <div class="panel-table-item" style="width: 100px">
          <InputNumber
            v-model="form.timeout"
            size="small"
            :max="60"
            :min="0.1"
            :step="0.1"
          />
        </div>
        <div class="panel-table-item" style="width: 100px">
          <Select size="small" v-model="form.retrycount">
            <Option
              v-for="item in RETRY_OPTIONS"
              :value="item.label"
              :key="item.value"
                >{{ item.label }}</Option
            >
          </Select>
        </div>
        <div class="panel-table-item" style="width: 180px">
          <Select size="small" v-model="form.excepmethod">
            <Option
              v-for="item in HANDLE_OPTIONS"
              :value="item.label"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { RETRY_OPTIONS, HANDLE_OPTIONS } from '../../lib/constant';

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
});
</script>
